<template>
	<view class="commit-card" v-for="(item,index) in cardData" :key="item.CommunityID || index">
		<view class="user-box">
			<view class="UserImage" @click="gotoDetailsPage(item.CommunityID)">
				<image class="Avatar" :src="imageUrl+item?.pub_img" mode="aspectFill"></image>
				<view class="Name">
					<text>{{item.pub_nick_name}}</text>
					<text class="commit_status":style="getCommitStatusStyle(item.commit_status)">
					{{ getCommitStatus(item.commit_status) }}</text>
				</view>
			</view>
			<uni-icons @click="OpenMorePopup(item.CommunityID)" type="more-filled" size="24"></uni-icons>
		</view>
		<view class="Content-title" @click="gotoDetailsPage(item.CommunityID)">{{item.trip_blog_title}}</view>
		<text class="Content-text" @click="gotoDetailsPage(item.CommunityID)">{{item.trip_blog_content}}</text>
		<view class="imageAll-box" @click="gotoDetailsPage(item.CommunityID)">
			<block v-for="(itemImg,inde) in item.img_list" :key="index">
				<image class="item-iameg" mode="aspectFill" :src="imageUrl+itemImg"></image>
			</block>
		</view>
		<view class="footer-box">
			<text class="time">提交时间：{{ item.create_time || '--' }}</text>
			<view class="Views-like">
				<text class="Views">{{ item.blog_view || '0' }}次浏览</text>
				<view class="icon-item" @click="isLiack(item.CommunityID,index)">
					<uni-icons v-if="item.is_like==1" color="#fc394b" type="hand-up-filled" size="18"></uni-icons>
					<uni-icons v-if="item.is_like==0" type="hand-up" size="18"></uni-icons>
					<view class="iconNumber">{{item.blog_like}}</view>
				</view>
			</view>
		</view>
	</view>
	<MorePopupVue ref="openPopup" @deleteCommit="handleDeleteCommit" 
	:communityID="selectedCommitID"></MorePopupVue>
</template>

<script setup>
	import {ref,watchEffect} from 'vue';
	import { imageUrl } from '@/config/request/request';
	import { PostLike,DeleteMyCommit } from '@/config/API/commit';
	import {routerGuard} from '@/config/RouteGuard.js'
	import MorePopupVue from './MorePopup.vue';
	const openPopup = ref(); 
	// 用于存储当前点击的 CommunityID
	const selectedCommitID = ref(0);
	const props = defineProps({
		cardData: {
			type: Array,
			default: () => []
		},
	})
	// 排序函数
	const sortCardData = () => {
		// 按照审核状态进行排序
		props.cardData.sort((a, b) => {
			// 如果 a 审核拒绝 (2)，排在前面
			if (a.commit_status === 2) return -1;
			// 如果 b 审核拒绝 (2)，排在前面
			if (b.commit_status === 2) return 1;

			// 审核中 (3) 排在中间
			if (a.commit_status === 3 && b.commit_status !== 3) return -1;
			if (b.commit_status === 3 && a.commit_status !== 3) return 1;

			// 审核通过 (1) 排在最后
			return 0; // 如果两个都有相同状态，保持不变
		});
	};

	// 使用 watchEffect 或合适的地方触发排序
	watchEffect(() => {
		console.log('父组件传过来的社区数据', props.cardData);
		sortCardData(); // 排序
	});

	// 打开更多弹窗
	const OpenMorePopup = (id) => {
		selectedCommitID.value = id
		if (openPopup.value) {
			openPopup.value.showPopup();
		}
		console.log('打开更多弹窗',id);
	}
	
	const hideMorePopup = () => {
		if (openPopup.value) {
			openPopup.value.hidePopup();
		}
		console.log('关闭更多弹窗');
	};
	// 删除提交
	const handleDeleteCommit = async (CommunityID) => {
		try {
			// 调用删除 API
			const data = await DeleteMyCommit(CommunityID);
			if (data.code == 200) {
				hideMorePopup()
				uni.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 1500
				});
				// 更新界面，删除对应的卡片
				const index = props.cardData.findIndex(item => item.CommunityID == CommunityID);
				if (index !== -1) {
					props.cardData.splice(index, 1);  // 删除对应的社区数据
				}
			} else {
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('删除失败:', error);
			uni.showToast({
				title: '删除失败，请稍后重试',
				icon: 'none'
			});
		}
	}
	// 获取提交状态
	const getCommitStatus = (status) => {
		switch(status) {
			case "1":
				return '审核中';
			case "2":
				return '审核通过';
			case "3":
				return '审核拒绝';
			default:
				return '未知状态';
		}
	}
	// 获取提交状态对应的颜色样式
	const getCommitStatusStyle = (status) => {
		if (status == "1") return { color: '#e7a441' };  // 审核通过，绿色
		if (status == "2") return { color: '#67c23a' };    // 审核拒绝，红色
		if (status == "3") return { color: '#fc394b' };    // 审核拒绝，红色
		return { color: '#00aaff' };                   // 审核中，黄色
	}
	// 点赞
	const isLiack = async(id,index) => {
		const data = await PostLike(id)
		console.log('是否点赞成功===>>',data)
		if(data.code == 200){
			props.cardData[index].is_like == 0 ? props.cardData[index].is_like = 1 : props.cardData[index].is_like = 0
			props.cardData[index].is_like == 1 ? props.cardData[index].blog_like += 1 : props.cardData[index].blog_like -= 1
		}else if(data.code == 309){
			uni.clearStorageSync()
			uni.navigateTo({
				url: '/pages/Login/Login'
			});
		}
	}
	// 跳转到详情页
	const gotoDetailsPage = (id) => {
		const url = `/pages/community/commitDetails?id=${id}`
		routerGuard(url);
	}
</script>


<style lang="scss" scoped>
.commit-card{
	width: 100%;
	min-height: 300rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	.user-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.UserImage{
			display: flex;
			align-items: center;
			gap: 30rpx;
			margin: 40rpx 0;
			.Avatar{
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}
			.Name{
				display: flex;
				flex-direction: column;
				gap: 5rpx;
				text{
					max-width: 80vw;
					font-size: 30rpx;
					color: #1a1a1a;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; /* 设置最大行数 */
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.commit_status{
					font-size: 26rpx;
					color: #8f8f8f;
				}
			}
		}
	}
	.Content-title{
		margin-top: 10rpx;
		font-size: 30rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 设置最大行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5em; /* 每行的高度 */
		word-break: break-all; /* 防止长单词导致布局破坏 */
	}
	.Content-text{
		color: #333333;
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4; /* 设置最大行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5em; /* 每行的高度 */
		word-break: break-all; /* 防止长单词导致布局破坏 */
	}

	.imageAll-box {
		margin: 30rpx 0;
		display: flex;
		gap: 15rpx;
		flex-wrap: wrap;
		.item-iameg {
			border-radius: 14rpx;
			width: calc((100% - 30rpx) / 3);
			height: 190rpx;
		}
	}
	.footer-box{
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		gap: 80rpx;
		align-items: center;
		.time{
			max-width: 390rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1; /* 设置最大行数 */
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 26rpx;
			color: #8f8f8f;
		}
		.Views-like{
			display: flex;
			align-items: center;
			gap: 50rpx;
			.Views{
				font-size: 26rpx;
				color: #8f8f8f;
				font-family: 300;
				letter-spacing: 3rpx;
			}
			.icon-item{
				display: flex;
				align-items: center;
				.iconNumber{
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>